<template>
	<div class="app-vchart-pie">
		<!--饼图 -->
			
			<ve-ring 
				v-loading="loading"
				ref="vRings"
				height="250px"
				:settings="setting" 
				:extend="extend" 
				:title="{text:title.text}"
				:data="chartData"
				>
				<div v-show="!chartData||!chartData.rows||!chartData.rows.length" class="v-charts-data-empty">
					<span style="line-height: 1;">
						<!--<i class="iconfont icon-no-chart"></i>
						<br />-->
						 暂无数据 
					</span>
				</div>
			</ve-ring>
			
	</div>
</template>

<script>
	import VeRing from 'v-charts/lib/ring.common';
	
	export default {
		components : {
			VeRing,
		},
		props: [
			"options",
		],
		data() {
			return {
				chartData: {},
				
				setting: {
					offsetY: 130,
					label: {
						show: false
					},
					labelLine: {
						show: false
					},
					radius: [60, 80],
				},

				extend: {
					  color: ['#4895d7', '#d7dde4'],
					  legend: {
					    orient: 'vertical',
					    x: 'right',
					    y: 'top',
					    itemWidth: 4,
					    itemHeight: 4,
					    align:"left",
					  },
				 		series: [
				    {
				      type: 'pie',
				      avoidLabelOverlap: false
				    }
			  		]
				},

				title: {
					text: '',
					textStyle: {
						fontSize: 14,
					},
					padding: 2
				},
				
				loading : false ,
			}
		},
		mounted(){
			this.title = {
				...this.title,
				...this.options.title
			};
			this.extend = {
				...this.extend,
				...this.options.extend
			};
			this.setting = {
				...this.setting,
				...this.options.setting
			};
		},
		methods: {
			init(data){
				this.loading = false ;
				this.chartData = data ;
				console.log(111,this.chartData)
			},
			refresh(){
				this.init();
			}
		}

	}
</script>